<template>
  <div class="setting-panel">
    <div>属性设置</div>
    <VDivider style="margin: 10px 0;" />
    <VExpansionPanels
      v-model="panel"
      multiple
      class="no-icon-rotate"
    >
      <VExpansionPanel>
        <VExpansionPanelTitle>
          基本属性
        </VExpansionPanelTitle>
        <VExpansionPanelText>
          <VRadioGroup
            v-model="linkType"
            inline
            class="setting-mb-12"
          >
            <VRadio
              label="普通路径"
              :value="0"
              density="compact"
            />
            <VRadio
              v-if="link2Show"
              label="特殊路径"
              :value="1"
              density="compact"
            />
          </VRadioGroup>
        </VExpansionPanelText>
      </VExpansionPanel>
      <VExpansionPanel v-if="panel2Show">
        <VExpansionPanelTitle>
          特殊属性
        </VExpansionPanelTitle>
        <VExpansionPanelText v-if="switchShow">
          <VRadioGroup
            v-model="switchType"
            inline
            class="setting-mb-12"
          >
            <VRadio
              label="普通路径"
              value="switch"
              density="compact"
            />
            <VRadio
              label="默认路径"
              value="default"
              density="compact"
            />
          </VRadioGroup>
          <VTextField
            v-if="idShow"
            v-model="id"
            class="setting-mb-12"
            label="表达式ID"
            clearable
          />
          <VTextField
            v-if="tagShow"
            v-model="tag"
            class="setting-mb-12"
            label="标签"
            clearable
          />
        </VExpansionPanelText>


        <VExpansionPanelText v-if="ifShow">
          <VRadioGroup
            v-model="ifType"
            inline
            class="setting-mb-12"
          >
            <VRadio
              label="TRUE路径"
              value="true"
              density="compact"
            />
            <VRadio
              label="FALSE路径"
              value="false"
              density="compact"
            />
          </VRadioGroup>
        </VExpansionPanelText>
      </VExpansionPanel>
    </VExpansionPanels>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  edgeData: {
    type: Object,
    default: () => {
      return {}
    },
  },
  edgeSourceData: Object,
  edgeTargetData: Object,
})

const emits  = defineEmits(["setEdgeProp", "setEdgeSwitchProp", "setEdgeIfProp"])
const panel = ref([0,1])

// 使用 ref 创建响应式对象
const edgeDataRef = ref(props.edgeData)
const edgeSourceDataRef = ref(props.edgeSourceData)
const edgeTargetDataRef = ref(props.edgeTargetData)
const switchShow = ref(false)
const ifShow = ref(false)
const idShow = ref(false)
const tagShow = ref(false)
const switchType = ref(props.edgeData.properties.switchType || "switch")
const ifType = ref(props.edgeData.properties.ifType || "if")
const linkType = ref(props.edgeData.properties.linkType || 0)
const panel2Show = ref(false)
const link2Show = ref(false)

watch(switchType, val => {
  changeSwitchType(val)
  emits('setEdgeSwitchProp', { "switchType": val })
})

watch(ifType, val => {
  changeIfType(val)
  emits('setEdgeIfProp', { "ifType": val })
})

watch(linkType, val => {
  emits('setEdgeProp', { "linkType": val })
  changePanel(val)
})

const getType = () => {
  if(edgeSourceDataRef.value.type == 'NodeScriptComponent'){
    return edgeSourceDataRef.value.properties.type
  }
  
  return edgeSourceDataRef.value.type
}

const type = ref(getType())

watch(type, val => {
  changeType(val)
})

const changePanel = val => {
  const typeVal = type.value;
  if(typeof typeVal === 'string' && typeVal === 'common'){
    link2Show.value = false
  }else{
    link2Show.value = true
  }

  if(typeof val === 'number' && val == 1){
    panel2Show.value = true
  }else{
    panel2Show.value = false
  }
}

const changeType = val => {
  if(typeof val === 'string' && (val === 'switch' || val === 'switch_script')){
    switchShow.value = true
    changeSwitchType(switchType.value)
  }else if(typeof val === 'string' && (val === 'if' || val === 'if_script')){
    ifShow.value = true
    changeIfType(ifType.value)
  }
}

const changeSwitchType = val => {
  if(val == 'switch' || val === 'switch_script'){
    idShow.value = true
    tagShow.value = true
  }else{
    idShow.value = false
    tagShow.value = false
    id.value = null
    tag.value = null
  }
}

const changeIfType = val => {
  // if(val == 'if' || val === 'if_script'){
  //   ifShow.value = true
  // }else{
  //   ifShow.value = false
  // }
}

const id = ref(props.edgeData.properties.id)
const tag = ref(props.edgeData.properties.tag)

watch(id, val => { emits('setEdgeProp', { "id": val }) })
watch(tag, val => { emits('setEdgeProp', { "tag": val }) })


onMounted(() => {
  changePanel(linkType.value)
  changeType(type.value)
})
</script>

<style scoped>
.setting-panel {
  padding: 10px;
  background: #f9f9f9;
  block-size: calc(100vh - 273px);
  inline-size: 200px;
  inline-size: 320px;
  margin-block-start: 66px;

  /* border: 1px solid #ccc; */
  margin-inline-end: 14px;
  overflow-y: scroll;
}

.style-wrapper {
  display: flex;
}

.style-item {
  border: 1px solid #fff;
  block-size: 20px;
  cursor: pointer;
  inline-size: 20px;
  margin-inline-end: 5px;
}

.setting-item-title {
  color: #333;
  font-size: 14px;
  margin-block-start: 10px;
}

.setting-mb-12 {
  margin-block-end: 12px;
}

.setting-mt-12 {
  margin-block-start: 12px;
}
</style>
